// out: ../css/
@import './base.less';
@vw: 3.75vw;
// 头部
header {
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 (15 / @vw); // 固定定位的盒子，宽度靠内容撑开，希望宽度100%
    width: (375 / @vw);
    height: (50 / @vw);
    background-color: #fff; // 左边
    .collect {
        width: (235 / @vw);
        height: (50 / @vw);
        background-image: url(../assets/head.png);
        background-size: contain;
        background-repeat: no-repeat;
    }
    button {
        width: (80/@vw);
        height: (30/@vw);
        background-color: #ffe31b;
        line-height: (30/@vw);
        text-align: center;
        border-radius: (15/@vw);
        border: none;
    }
}
// 搜索
.search {
    display: flex;
    align-items: center;
    justify-content: center;
    width: (345/@vw);
    height: (32/@vw);
    margin-top: (60/@vw);
    margin-left: (15/@vw);
    border-radius: (16/@vw);
    background-color: #f2f4f5;
    span {
        width: (16/@vw);
        height: (16/@vw);
        line-height: (16/@vw);
        color: #a1a4b3;
    }
    .search-input {
        width: (112/@vw);
        height: (19/@vw);
        line-height: (19/@vw);
        margin-left: (10/@vw);
        color: #a1a4b3;
    }
}

// banner图片
.banner {
    width: 100%;
    height: (128/@vw);
    margin-top: (10/@vw);
    img {
        width: (345/@vw);
        height: 100%;
        margin-left: (15/@vw);
        border-radius: (10/@vw);
    }
}

// 排行榜
.rank {
    width: 100%;
    margin-top: (20/@vw);
    .title {
        width: (345/@vw);
        height: (27/@vw);
        display: flex;
        justify-content: space-between;
        margin-left: (15/@vw);
        h4 {
            width: (100/@vw);
            height: (27/@vw);
            line-height: (27/@vw);
            font-size: (18/@vw);
        }
        span {
            width: (40/@vw);
            height: (27/@vw);
            font-size: (13/@vw);
            color: #a1a4b3;
            line-height: (27/@vw);
            text-align: center;
        }
    }
    .sing {
        width: (345/@vw);
        height: (347/@vw);
        margin-left: (15/@vw);
        margin-top: (20/@vw);
        li {
            width: (345/@vw);
            height: (105/@vw);
            background-color: #fff;
            border-radius: (15/@vw);
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: (15/@vw);
            img {
                width: (105/@vw);
                height: (105/@vw);
                border-radius: (12/@vw);
            }
            .info {
                width: (214/@vw);
                display: flex;
                align-items: flex-start;
                flex: 1;
                margin-left: (15/@vw); // background-color: #ffe31b;
                p {
                    width: (214/@vw);
                    .first {
                        width: (214/@vw);
                        height: (29/@vw);
                        font-size: (14/@vw);
                        line-height: (29/@vw);
                        color: #333;
                        display: block;
                    }
                    span {
                        width: (214/@vw);
                        height: (22/@vw);
                        font-size: (12/@vw);
                        line-height: (22/@vw);
                        color: #a1a4b3;
                    }
                }
            }
        }
    }
}

// 推荐歌单
.recommend {
    width: 100%;
    margin-top: (20/@vw);
    .title {
        width: (345/@vw);
        height: (27/@vw);
        display: flex;
        justify-content: space-between;
        margin-left: (15/@vw);
        h4 {
            width: (100/@vw);
            height: (27/@vw);
            line-height: (27/@vw);
            font-size: (18/@vw);
        }
        span {
            width: (40/@vw);
            height: (27/@vw);
            font-size: (13/@vw);
            color: #a1a4b3;
            line-height: (27/@vw);
            text-align: center;
        }
    }
    .list {
        width: (375/@vw);
        height: (361/@vw);
        margin-left: (15/@vw);
        margin-top: (20/@vw);
        display: flex;
        justify-content: space-between;
        ul {
            width: (345/@vw);
            height: (318/@vw);
            display: flex;
            flex-wrap: wrap;
            li {
                width: (105/@vw);
                position: relative;
                margin: 0 (4/@vw);
                img {
                    width: (105/@vw);
                    height: (105/@vw);
                    border-radius: (13/@vw);
                }
                .txt {
                    position: absolute;
                    left: 0;
                    bottom: (54/@vw);
                    width: (70/@vw);
                    height: (28/@vw);
                    border-bottom-left-radius: (15/@vw);
                    border-top-right-radius: (15/@vw);
                    font-size: (14/@vw);
                    color: #fff;
                    background-color: rgb(0, 0, 0, 0.5);
                    text-align: center;
                    line-height: (28/@vw);
                }
            }
        }
    }
}

// 底部固定的
.download {
    width: (345/@vw);
    height: (45/@vw);
    background-color: pink;
    margin-left: (15/@vw);
    border-radius: (22.5/@vw);
    position: fixed;
    display: flex;
    bottom: (20/@vw);
    align-items: center;
    justify-content: space-evenly;
    padding: 0 (10/@vw) 0 (15/@vw);
    img {
        width: (36/@vw);
        height: (36/@vw);
    }
    span {
        width: (32/@vw);
        height: (32/@vw);
        border-radius: (16/@vw);
        background-color: #f2f3f5;
        line-height: (32/@vw);
        text-align: center;
    }
    p {
        flex: 1;
        margin-left: (10/@vw);
    }
}